<template>
  <div class="system-container">
    <el-row :gutter="20">
      <!-- 系统信息 -->
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>系统信息</span>
          </template>
          <el-descriptions :column="1" border>
            <el-descriptions-item label="PHP版本">
              {{ systemInfo.system?.php_version }}
            </el-descriptions-item>
            <el-descriptions-item label="Laravel版本">
              {{ systemInfo.system?.laravel_version }}
            </el-descriptions-item>
            <el-descriptions-item label="服务器软件">
              {{ systemInfo.system?.server_software }}
            </el-descriptions-item>
            <el-descriptions-item label="服务器系统">
              {{ systemInfo.system?.server_os }}
            </el-descriptions-item>
            <el-descriptions-item label="数据库版本">
              {{ systemInfo.database?.version }}
            </el-descriptions-item>
            <el-descriptions-item label="缓存驱动">
              {{ systemInfo.cache?.driver }}
            </el-descriptions-item>
            <el-descriptions-item label="缓存状态">
              <el-tag :type="systemInfo.cache?.status === '正常' ? 'success' : 'danger'">
                {{ systemInfo.cache?.status }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="Redis状态">
              <el-tag :type="systemInfo.redis?.status === '正常' ? 'success' : 'danger'">
                {{ systemInfo.redis?.status }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="服务器时间">
              {{ systemInfo.time?.server_time }}
            </el-descriptions-item>
            <el-descriptions-item label="时区">
              {{ systemInfo.time?.timezone }}
            </el-descriptions-item>
          </el-descriptions>
          <div style="margin-top: 20px">
            <el-button type="danger" @click="handleClearCache">清除缓存</el-button>
          </div>
        </el-card>
      </el-col>

      <!-- 统计数据 -->
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>统计数据</span>
          </template>
          <el-descriptions :column="1" border>
            <el-descriptions-item label="用户总数">
              {{ statistics.users?.total }}
              <el-tag size="small" type="success" style="margin-left: 10px">
                启用: {{ statistics.users?.enabled }}
              </el-tag>
              <el-tag size="small" type="info" style="margin-left: 10px">
                禁用: {{ statistics.users?.disabled }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="角色总数">
              {{ statistics.roles?.total }}
              <el-tag size="small" type="success" style="margin-left: 10px">
                启用: {{ statistics.roles?.enabled }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="菜单总数">
              {{ statistics.menus?.total }}
              <el-tag size="small" type="success" style="margin-left: 10px">
                启用: {{ statistics.menus?.enabled }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="部门总数">
              {{ statistics.departments?.total }}
              <el-tag size="small" type="success" style="margin-left: 10px">
                启用: {{ statistics.departments?.enabled }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="在线用户">
              {{ statistics.online_users }}
            </el-descriptions-item>
            <el-descriptions-item label="操作日志">
              {{ statistics.operation_logs }}
            </el-descriptions-item>
            <el-descriptions-item label="登录日志">
              {{ statistics.login_logs }}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import request from '@/utils/request'

const systemInfo = reactive({
  system: {},
  database: {},
  cache: {},
  redis: {},
  time: {},
})

const statistics = reactive({
  users: {},
  roles: {},
  menus: {},
  departments: {},
  online_users: 0,
  operation_logs: 0,
  login_logs: 0,
})

// 加载系统信息
const loadSystemInfo = async () => {
  try {
    const res = await request.get('/system/info')
    if (res.code === 200) {
      Object.assign(systemInfo, res.data)
    }
  } catch (error) {
    console.error('加载系统信息失败:', error)
  }
}

// 加载统计数据
const loadStatistics = async () => {
  try {
    const res = await request.get('/system/statistics')
    if (res.code === 200) {
      Object.assign(statistics, res.data)
    }
  } catch (error) {
    console.error('加载统计数据失败:', error)
  }
}

// 清除缓存
const handleClearCache = async () => {
  try {
    await ElMessageBox.confirm('确定要清除缓存吗？', '提示', {
      type: 'warning',
    })
    const res = await request.post('/system/clear-cache')
    if (res.code === 200) {
      ElMessage.success('缓存清除成功')
    }
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error(error.message || '清除失败')
    }
  }
}

onMounted(() => {
  loadSystemInfo()
  loadStatistics()
})
</script>

<style scoped lang="scss">
.system-container {
  // padding 由 app-container 统一管理
}
</style>

